<script setup>
import { ref, reactive, onMounted } from 'vue'
import { MessagePlugin } from 'tdesign-vue-next'

// 搜索表单
const searchForm = reactive({
  orderNo: '',
  status: '',
  dateRange: []
})

// 订单列表数据
const orderList = ref([])
const loading = ref(false)

// 分页配置
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0
})

// 表格列配置
const columns = [
  { colKey: 'orderNo', title: '订单号', width: 180 },
  { colKey: 'userName', title: '用户' },
  { colKey: 'productName', title: '商品名称' },
  { colKey: 'amount', title: '金额', cell: (h, { row }) => `¥${row.amount}` },
  { colKey: 'payMethod', title: '支付方式' },
  { 
    colKey: 'status', 
    title: '状态',
    cell: (h, { row }) => {
      const statusMap = {
        'pending': { theme: 'warning', text: '待付款' },
        'paid': { theme: 'primary', text: '已付款' },
        'shipped': { theme: 'success', text: '已发货' },
        'completed': { theme: 'success', text: '已完成' },
        'cancelled': { theme: 'danger', text: '已取消' }
      }
      const status = statusMap[row.status] || statusMap['pending']
      return h('t-tag', {
        theme: status.theme,
        variant: 'light'
      }, status.text)
    }
  },
  { colKey: 'createTime', title: '下单时间' },
  { colKey: 'operation', title: '操作', width: 180 }
]

// 获取订单列表
const fetchOrderList = async () => {
  loading.value = true
  try {
    // 模拟数据
    const mockData = Array.from({ length: 1256 }, (_, i) => ({
      orderNo: `202501${String(i + 1).padStart(6, '0')}`,
      userName: `用户${Math.floor(Math.random() * 100) + 1}`,
      productName: ['景点门票', '活动报名', '酒店预订', '旅游套餐'][Math.floor(Math.random() * 4)],
      amount: Math.floor(Math.random() * 1000) + 100,
      payMethod: ['微信支付', '支付宝', '银联支付'][Math.floor(Math.random() * 3)],
      status: ['pending', 'paid', 'shipped', 'completed', 'cancelled'][Math.floor(Math.random() * 5)],
      createTime: new Date(Date.now() - Math.random() * 30 * 24 * 60 * 60 * 1000).toLocaleDateString()
    }))
    
    // 模拟分页
    const start = (pagination.current - 1) * pagination.pageSize
    const end = start + pagination.pageSize
    orderList.value = mockData.slice(start, end)
    pagination.total = mockData.length
  } catch (error) {
    MessagePlugin.error('获取订单列表失败')
  } finally {
    loading.value = false
  }
}

// 搜索
const handleSearch = () => {
  pagination.current = 1
  fetchOrderList()
}

// 重置
const handleReset = () => {
  searchForm.orderNo = ''
  searchForm.status = ''
  searchForm.dateRange = []
  handleSearch()
}

// 分页变化
const handlePageChange = (pageInfo) => {
  pagination.current = pageInfo.current
  pagination.pageSize = pageInfo.pageSize
  fetchOrderList()
}

// 查看订单详情
const handleView = (row) => {
  MessagePlugin.info(`查看订单详情: ${row.orderNo}`)
}

// 处理订单
const handleProcess = (row) => {
  MessagePlugin.info(`处理订单: ${row.orderNo}`)
}

// 导出订单
const handleExport = () => {
  MessagePlugin.success('正在导出订单数据...')
}

onMounted(() => {
  fetchOrderList()
})
</script>

<template>
  <div class="order-list-container">
    <!-- 搜索区域 -->
    <t-card class="search-card">
      <t-form :data="searchForm" layout="inline">
        <t-form-item label="订单号">
          <t-input v-model="searchForm.orderNo" placeholder="请输入订单号" clearable />
        </t-form-item>
        <t-form-item label="订单状态">
          <t-select v-model="searchForm.status" placeholder="请选择状态" clearable>
            <t-option value="pending" label="待付款" />
            <t-option value="paid" label="已付款" />
            <t-option value="shipped" label="已发货" />
            <t-option value="completed" label="已完成" />
            <t-option value="cancelled" label="已取消" />
          </t-select>
        </t-form-item>
        <t-form-item label="下单时间">
          <t-date-range-picker
            v-model="searchForm.dateRange"
            placeholder="请选择日期范围"
            clearable
          />
        </t-form-item>
        <t-form-item>
          <t-space>
            <t-button theme="primary" @click="handleSearch">查询</t-button>
            <t-button theme="default" @click="handleReset">重置</t-button>
          </t-space>
        </t-form-item>
      </t-form>
    </t-card>

    <!-- 操作区域 -->
    <t-card class="table-card">
      <div class="table-header">
        <h3>订单列表</h3>
        <t-button theme="default" @click="handleExport">
          <template #icon><t-icon name="download" /></template>
          导出订单
        </t-button>
      </div>

      <!-- 表格 -->
      <t-table
        :data="orderList"
        :columns="columns"
        :loading="loading"
        :pagination="pagination"
        @page-change="handlePageChange"
        stripe
        hover
      >
        <template #operation="{ row }">
          <t-space>
            <t-link theme="primary" hover="color" @click="handleView(row)">详情</t-link>
            <t-link 
              v-if="['pending', 'paid'].includes(row.status)"
              theme="primary" 
              hover="color" 
              @click="handleProcess(row)"
            >
              处理
            </t-link>
          </t-space>
        </template>
      </t-table>
    </t-card>
  </div>
</template>

<style scoped>
.order-list-container {
  height: 100%;
}

.search-card {
  margin-bottom: 16px;
}

.table-card {
  height: calc(100% - 120px);
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.table-header h3 {
  margin: 0;
}
</style> 